<template>
  <div class="readme">
    <div class="content-wrapper">
      <div class="section-container">
        <section class="intro section-content intro-border">
          <h1>平台简介</h1>
          <div class="text-box">
            <p>欢迎莅临古青铜器智能鉴定与学习平台。本平台融合先进科技与悠久文明,致力于揭示青铜器背后的历史智慧与艺术魅力。我们运用尖端人工智能技术,为青铜器研究开启新篇章。</p>
            <p>无论您是专业研究人员、历史爱好者,还是对中国古代文明怀有好奇心的探索者,这里都将成为您探寻青铜奥秘的理想起点。让我们携手穿越时空,感受先祖智慧,共同书写中华文明新篇章。</p>
          </div>
        </section>

        <section class="copyright section-content copyright-border">
          <h1>知识产权声明</h1>
          <div class="text-box">
            <p>本平台由<strong>智銅</strong>团队倾心打造,所有内容均受中华人民共和国法律保护。未经授权,严禁以任何形式使用、复制或传播平台内容。</p>
            <p>我们欢迎教育工作者和学术研究人员在课堂教学与研究中使用本站资源。若您有相关合作需求，可联系邮箱<strong>2295894399@qq.com</strong>。</p>
            <p>@2025智銅团队。保留所有权利。</p>
          </div>
        </section>

        <section class="feedback section-content feedback-border">
          <h1>意见反馈</h1>
          <div class="text-box">
            <p>您的智慧是我们不断进化的动力。我们珍视每一位用户的反馈,期待您的真知灼见推动平台持续改进。无论是功能建议、内容改进,还是用户体验优化,我们都热切期待您的意见。</p>
            <p>请在下方文本框中留下您的宝贵意见,让我们携手共创青铜文化的数字未来。</p>
            <textarea v-model="feedbackText" placeholder="请输入您的反馈..." rows="4"></textarea>
            <button @click="submitFeedback" class="button1">
              <span class="button-text">提交反馈</span>
            </button>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { BASE_URL } from '@/config.js';
export default {
  name: 'Readme',
  methods: {
    hoverFeature(index) {
      this.features[index].hovered = true;
    },
    unhoverFeature(index) {
      this.features[index].hovered = false;
    },
    async submitFeedback() {
      if (this.feedbackText.trim() === '') {
        alert('请输入反馈内容');
        return;
      }
      try {
        await axios.post(`${BASE_URL}/api/feedback`, {
          feedback: this.feedbackText 
        });
        alert('感谢您的反馈！您的意见是我们进步的动力。');
        this.feedbackText = '';
      } catch (error) {
        console.error('提交反馈时出错:', error);
        alert('抱歉,提交反馈时出现错误。请稍后再试,或通过其他渠道联系我们。');
      }
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.readme {
  color: #dbf1e1;
  font-size: large;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  position: relative; /* 添加相对定位 */
  background-image: url('@/assets/s3.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-position: left;
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 背景图居中 */
}

/* 伪元素背景图 */
.readme::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5); /* 调暗程度可以通过调整 alpha 值来控制 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保背景图覆盖整个视口高度 */
}

.content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2px;
}

.section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

/* 边框样式 */
.intro-border,
.feedback-border,
.copyright-border {
  position: relative;
  max-width: 2000px; /* 最大宽度限制 */
  padding: 120px; /* 内边距 */
  background: transparent; /* 背景透明 */
}

/* 平台简介边框 */
.intro-border {
  background-image: url('@/assets/边框2.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 知识产权声明边框 */
.copyright-border {
  background-image: url('@/assets/边框2.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 意见反馈边框 */
.feedback-border {
  background-image: url('@/assets/grey1.png');
  background-size: 500% 70%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 标题样式 */
h1 {
  text-align: center;
  font-size: 2.5em;
  margin-top: 0px;
  color: #c76a66;
}

/* 段落样式 */
.text-box p {
  line-height: 1.5;
}

/* 意见反馈样式 */
.text-box {
  text-align: center; /* 居中对齐 */
  margin: 10px 0;
}

textarea {
  width: 90%;
  max-width: 800px; /* 最大宽度限制 */
  display: inline-block;
  padding: 10px;
  border: 1px solid #ffffff;
  border-radius: 5px;
  margin-bottom: 40px;
  resize: none;
  font-family: inherit; /* 继承父元素的字体 */
  font-size: 16px;
}

.button1 {
  margin: 1px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: transparent;
  color: #bdf8cd;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
}

.button1:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.button1:active {
  background-color: rgba(255, 255, 255, 0.2);
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .readme {
    padding: 10px;
    font-size: medium;
  }

  .content-wrapper {
    padding: 10px;
  }

  .section-container {
    margin: 10px 0;
  }

  .intro-border,
  .feedback-border,
  .copyright-border {
    max-width: 100%;
    padding: 60px;
  }

  h1 {
    font-size: 2em;
  }

  .text-box p {
    font-size: 14px;
  }

  textarea {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .button1 {
    padding: 8px 15px;
    font-size: 16px;
  }
}
</style>